import { Card, message, Row, Col, Space } from 'antd';
import { history, useRequest } from 'umi';
import ProForm, {
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormDependency,
  ProFormDigit,
  ProFormUploadButton,
  ProFormRadio,
} from '@ant-design/pro-form';
import type { FC } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { fakeSubmitForm, queryDetail, update } from './service';
import { queryPublicDept, hospitalDeptlist, hospitalList } from '@/services/ant-design-pro/api';

const BasicForm: FC<Record<string, any>> = () => {
  const { run } = useRequest(fakeSubmitForm, {
    manual: true,
    onSuccess: () => {
      message.success('提交成功');
      history.push('/hospital/hospitalDept-list');
    },
  });

  // const { data, loading } = useRequest(() => {
  //   if (history.location.query.id) {
  //     return queryDetail(history.location.query);
  //   }
  // });

  const onFinish = async (values: Record<string, any>) => {
    console.log('values', values);
    values.bsDeptId = values.bsDept.value;
    values.bsDeptName = values.bsDept.label;
    values.hospitalId = values.hospital.value;
    values.hospitalName = values.hospital.label;
    delete values.bsDept;
    delete values.hospital;
    if (values.upload && values.upload[0].response) {
      values.logo = values.upload[0].response.data.url;
      delete values.upload;
    }
    if (values.iconUpload && values.iconUpload[0].response) {
      values.icon = values.iconUpload[0].response.data.url;
      delete values.iconUpload;
    }
    if (history.location.query.id) {
      values.id = history.location.query.id;
      try {
        const response = await update(values);
        if (response.code == 200) {
          message.success('修改成功');
          history.push('/hospital/hospitalDept-list');
        } else {
          message.error('修改失败!');
        }
      } catch (error) {
        console.log(error);
      }
    } else {
      const response = await fakeSubmitForm(values);
      if (response.code == 200) {
        message.success('提交成功');
        history.push('/hospital/hospitalDept-list');
      } else {
        message.error(response.message);
      }
    }
  };

  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
  };

  return (
    <PageContainer content="">
      <Card bordered={false}>
        <ProForm
          hideRequiredMark
          style={{ margin: 'auto', marginTop: 8 }}
          name="basic"
          layout="horizontal"
          // initialValues={data}
          onFinish={onFinish}
          {...formItemLayout}
          request={async () => {
            if (history.location.query.id) {
              return queryDetail(history.location.query).then(({ data }) => {
                let bsDept = { key: data.bsDeptId, value: data.bsDeptId, label: data.bsDeptName };
                data.bsDept = bsDept;
                data.level = data.level + '';
                data.isMain = data.isMain + '';
                let hospital = {
                  key: data.hospitalId,
                  value: data.hospitalId,
                  label: data.hospitalName,
                };
                data.hospital = hospital;
                if (data.logo) {
                  data.upload = [
                    {
                      uid: '1',
                      name: 'logo',
                      status: 'done',
                      url: 'http://oss.yizuoyiyou.com.cn' + data.logo,
                    },
                  ];
                }
                if (data.icon) {
                  data.iconUpload = [
                    {
                      uid: '1',
                      name: 'icon',
                      status: 'done',
                      url: 'http://oss.yizuoyiyou.com.cn' + data.icon,
                    },
                  ];
                }
                return data;
              });
            } else {
              return {};
            }
          }}
          submitter={{
            render: (props, doms) => {
              return (
                <Row>
                  <Col span={14} offset={4}>
                    <Space>{doms}</Space>
                  </Col>
                </Row>
              );
            },
          }}
        >
          <ProFormSelect
            width="md"
            name="hospital"
            label="医院名称"
            fieldProps={{
              labelInValue: true,
            }}
            showSearch
            request={async ({ keyWords }) => {
              let query = {
                likeQuery: {
                  name: keyWords,
                },
                pageNum: 1,
                pageSize: 20,
              };
              return hospitalList(query).then(({ data }) => {
                return data.list.map((item) => {
                  return {
                    label: item.name,
                    value: item.id,
                  };
                });
              });
            }}
          />
          <ProFormText
            width="md"
            label="科室名称"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入科室名称',
              },
            ]}
            placeholder="请输入科室名称"
          />
          <ProFormSelect
            width="md"
            name="level"
            label="科室等级"
            valueEnum={{
              1: '一级',
              2: '二级',
            }}
          />
          <ProFormDependency name={['hospital']}>
            {({ hospital }) => {
              return (
                <ProFormSelect
                  width="md"
                  key={hospital?.value}
                  name="parentId"
                  label="上级科室"
                  request={async ({ keyWords }) => {
                    let query = {
                      likeQuery: {
                        name: keyWords,
                      },
                      eqQuery: {
                        hospitalId: hospital?.value,
                      },
                      pageNum: 1,
                      pageSize: 20,
                    };
                    return hospitalDeptlist(query).then(({ data }) => {
                      return data.list.map((item) => {
                        return {
                          label: item.name,
                          value: item.id,
                        };
                      });
                    });
                  }}
                />
              );
            }}
          </ProFormDependency>
          <ProFormDigit
            width="md"
            name="sort"
            label="同级科室排序"
            placeholder="数字越大越靠前"
            min={1}
          />
          <ProFormTextArea
            width="md"
            name="introduction"
            label="科室简介"
            placeholder="请输入科室简介"
          />
          <ProFormRadio.Group
            options={[
              {
                value: '1',
                label: '是',
              },
              {
                value: '0',
                label: '否',
              },
            ]}
            label="是否科普明星科室"
            name="isMain"
          />
          <ProFormDependency name={['isMain']}>
            {({ isMain }) => {
              if (isMain == 1) {
                return (
                  <ProFormDigit
                    width="md"
                    name="mainSort"
                    label="科普明星科室内排序"
                    placeholder="请输入从1-100的不重复数字"
                    min={1}
                  />
                );
              }
            }}
          </ProFormDependency>

          <ProFormSelect
            width="md"
            name="bsDept"
            showSearch
            fieldProps={{
              labelInValue: true,
            }}
            label="映射医中心公共科室"
            request={async ({ keyWords }) => {
              let query = {
                likeQuery: {
                  deptName: keyWords,
                },
                pageNum: 1,
                pageSize: 20,
              };
              return queryPublicDept(query).then(({ data }) => {
                return data.list.map((item) => {
                  return {
                    label: item.deptName,
                    value: item.id,
                  };
                });
              });
            }}
          />
          <ProFormUploadButton
            name="iconUpload"
            label="科室icon"
            max={1}
            fieldProps={{
              name: 'file',
              listType: 'picture-card',
            }}
            action="/api/file/upload"
          />
          <ProFormUploadButton
            name="upload"
            label="科室logo"
            max={1}
            fieldProps={{
              name: 'file',
              listType: 'picture-card',
            }}
            action="/api/file/upload"
          />
          {/* <ProFormSelect
            width="md"
            name="deptDiseaseTagsRelations"
            label="诊疗疾病"
            fieldProps={{
              labelInValue: true,
            }}
            showSearch
            request={async ({ keyWords }) => {
              let query = {
                likeQuery: {
                  name: keyWords,
                },
                pageNum: 1,
                pageSize: 20,
              };
              return diseaseList(query).then(({ data }) => {
                return data.list.map((item) => {
                  return {
                    label: item.name,
                    value: item.id,
                  };
                });
              });
            }}
          /> */}
        </ProForm>
      </Card>
    </PageContainer>
  );
};

export default BasicForm;
